<!DOCTYPE html>
<html class="x-admin-sm" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>个人资料</title>
    <header th:replace="header::html"></header>
    <link th:href="@{/css/personal.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/xadmin/lib/layui/css/layui.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/xadmin/lib/layui/layui.js}" type="text/javascript"></script>
</head>

<body>
<div style="width: 100%;height: 10px;background-color: white"></div>

<div class="perTitle">
    <img alt="加载失败"  th:src="@{/images/1314520.png}">
    <span>基本信息</span>
</div>
<div id="basicInfo">
    <div id="editPoneDiv" style="cursor: pointer; background-color: white;">
        <span class="point"></span>
        <span class="col1" onclick="changePhone()">手机号：</span>
        <span class="col2" id="uphone" onclick="changePhone()"></span>
    </div>
    <div style="background-color: rgb(241, 241, 241);" >
        <span class="point"></span>
        <span class="col1" onclick="changeName()">昵称：</span>
        <span class="col2" id="uname" onclick="changeName()"></span>
<!--        <span id="editPone" onclick="changeName()">&nbsp;&nbsp;&nbsp;&nbsp;修改昵称<span>&gt;&gt;</span></span>-->
    </div>
    <div style="cursor: pointer; background-color: white;">
        <span class="point"></span>
        <span class="col1" onclick="changeUaccount()">账号：</span>
        <span class="col2" id="uaccount" onclick="changeUaccount()"></span>
    </div>
    <div style="background-color: rgb(241, 241, 241);">
        <span class="point"></span>
        <span class="col1" onclick="changeUaddress()">地址</span>
        <span class="col2" id="uaddress" onclick="changeUaddress()"></span>
    </div>
    <div style="cursor: pointer; background-color: white;">
        <span class="point" ></span>
        <span class="col1" onclick="changeUsex()">性别</span>
        <span class="col2" id="usex" onclick="changeUsex()"></span>
    </div>
</div>
<div class="perTitle" >
    <img alt="加载失败"  th:src="@{/images/u17193.png}">
    <span>信用</span>
</div>
<div id="checkInfo">
    <div style="cursor: pointer; background-color: white;">
        <span class="point"></span>
        <span class="col1" onclick="changeUscore()">信用分</span>
        <span class="col2" id="uscore" onclick="changeUscore()"></span>
    </div>

</div>
<div class="perTitle">
    <img alt="加载失败"  th:src="@{/images/u17244.png}">
    <span>账号信息</span>
</div>
<div id="accountInfo">
    <div style="background-color: rgb(241, 241, 241);" >
        <span class="point"></span>
        <span class="col1" onclick="changeUstory()">个人介绍</span>
        <span class="col2" id="ustory" onclick="changeUstory()"></span>
    </div>
</div>

</body>


<script>
    var backuname;
    var backuaddress;
    var backustory;
    var uid;
    layui.use('layer',function () {
	    var layer=layui.layer;
    });
    $(function () {
       $.ajax({
           type:'get'
           ,url:'/api-front/arbitration/getRid'
           ,success:function (msg) {
           	    backuname=msg.uname;
           	    backuaddress=msg.uaddress;
           	    backustory=msg.ustory;
           	    uid=msg.uid;
               $("#uphone").append(msg.uphone);
		       $("#uname").append(msg.uname);
		       $("#uaccount").append(msg.uaccount);
		       $("#uaddress").append(msg.uaddress);
		       $("#usex").append(msg.usex);
		       $("#uscore").append(msg.uscore);
		       $("#ustory").append(msg.ustory);
	       }
	       ,error:function () {
               layer.msg('网络加载异常，请稍后再试',{icon:7})
	       }
       });
        layer.msg('点击相关标题可以进行修改操作',{icon:6})

    });


    function changePhone() {
        layer.msg('抱歉，手机号为唯一性，请联系管理员核实后进行更改',{icon:6})
    }

    function changeName() {
	    layer.prompt({title: '请输入新昵称，并确认', area: ['300px', '20px'], formType: 2}, function(text, index){
		    text=text.replace(/^\s+|\s+$/g,"");
		    if (text.length>15) {
		    	layer.msg('昵称字符长度不得超过15个字符',{icon:2})
		    } else if (text.length===0) {
			    layer.msg('请对内容进行填写后确认',{icon:2})
		    } else if (backuname === text) {
			    layer.msg('新昵称与旧昵称一致', {icon: 6});
		    } else {
                $.ajax({
                    type:'post'
                    ,url:'/api-front/arbitration/changeName'
                    ,data:{"uid":uid,"uname":text}
                    ,success:function (msg) {
		                if (msg === "success") {
			                layer.close(index);
			                layer.msg('恭喜你，修改成功', {icon: 6});
			                document.getElementById("uname").innerText=text;
		                } else {
			                layer.msg('修改失败，请重试', {icon: 5});
		                }
	                }
	                ,error:function () {
		                layer.msg('服务器繁忙，请稍后再试', {icon: 6});
	                }
                });
		    }
	    });
    }

    function changeUaccount() {
	    layer.msg('抱歉，账号为唯一性，不可进行更改',{icon:6})
    }

    function changeUaddress() {
	    layer.prompt({title: '请输入新地址，并确认', area: ['300px', '30px'], formType: 2}, function(text, index){
		    text=text.replace(/^\s+|\s+$/g,"");
		    if (text.length>30) {
			    layer.msg('地址字符长度不得超过30个字符',{icon:2})
		    } else if (text.length===0) {
			    layer.msg('请对内容进行填写后确认',{icon:2})
		    } else if (backuaddress === text) {
			    layer.msg('新地址与旧地址一致', {icon: 6});
		    } else {
			    $.ajax({
				    type: 'post'
				    , url: '/api-front/arbitration/changeAddress'
				    , data: {"uid": uid, "uaddress": text}
				    , success: function (msg) {
					    if (msg === "success") {
						    layer.close(index);
						    layer.msg('恭喜你，修改成功', {icon: 6});
						    document.getElementById("uaddress").innerText = text;
					    } else {
						    layer.msg('修改失败，请重试', {icon: 5});
					    }
				    }
				    , error: function () {
					    layer.msg('服务器繁忙，请稍后再试', {icon: 6});
				    }
			    });
		    }
	    });
    }

    function changeUsex() {
	    layer.msg('抱歉，性别不可进行更改',{icon:6})
    }

    function changeUscore() {
	    layer.msg('抱歉，信用分不可进行更改',{icon:6})
    }

    function changeUstory() {
	    layer.prompt({title: '请输入新的个人介绍，并确认', area: ['300px', '50px'], formType: 2}, function(text, index){
		    text=text.replace(/^\s+|\s+$/g,"");
		    if (text.length>50) {
			    layer.msg('个人介绍字符长度不得超过50个字符',{icon:2})
		    } else if (text.length===0) {
			    layer.msg('请对内容进行填写后确认',{icon:2})
		    } else if (backustory === text) {
			    layer.msg('介绍内容与原先一致', {icon: 6});
		    } else {
			    $.ajax({
				    type:'post'
				    ,url:'/api-front/arbitration/changeUstory'
				    ,data:{"uid":uid,"ustory":text}
				    ,success:function (msg) {
					    if (msg === "success") {
						    layer.close(index);
						    layer.msg('恭喜你，修改成功', {icon: 6});
						    document.getElementById("ustory").innerText=text;
					    } else {
						    layer.msg('修改失败，请重试', {icon: 5});
					    }
				    }
				    ,error:function () {
					    layer.msg('服务器繁忙，请稍后再试', {icon: 6});
				    }
			    });
		    }
	    });
    }

</script>
</html>